<template>
  <div class="main">
    <md-field>
      <input-validate
        v-model="info.mobile"
        title="手机号码"
        class="input"
        placeholder="请输入您的手机号"
        v-validate="'required|mobile'"
        name="mobile"
        type="phone"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="您的手机号"
        :error="errors.first('mobile')"
      >
      </input-validate>
      <input-validate
        v-model="info.password"
        title="登录密码"
        class="input"
        placeholder="请输入您的密码"
        v-validate="'required|min:6'"
        name="password"
        type="password"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="您的密码"
        :error="errors.first('password')"
      >
      </input-validate>
      <input-validate
        v-model="info.imgCode"
        class="input"
        title="图形验证码"
        placeholder="输入您的图形验证码"
        v-validate="'required|max:4'"
        rightType="1"
        :imgUrl="imgSrc"
        name="imgCode"
        type="digit"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="图形验证码"
        :error="errors.first('imgCode')"
        @changeImg="changeImg"
      >
      </input-validate>
      <input-validate
        v-model="info.code"
        title="短信验证码"
        class="input"
        placeholder="请输入短信验证码"
        v-validate="'required|max:6'"
        rightType="2"
        name="code"
        type="digit"
        data-vv-value-path="innerValue"
        data-vv-validate-on="input"
        data-vv-as="短信验证码"
        :error="errors.first('code')"
        @sendCode="sendCode"
        ref="code"
      >
      </input-validate>
    </md-field>
    <md-button type="primary" class="confirm" round @click="confirm"
      >确定</md-button
    >
  </div>
</template>

<script>
import { InputItem, Field, Button } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "changePhone",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      info: {
        mobile: "",
        password: "",
        imgCode: "",
        code: ""
      },
      imgSrc: ""
    };
  },
  methods: {
    getCode() {
      this.$ajax
        .get(this.$api.getPicCode)
        .then(res => {
          this.imgSrc = res.data.code;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    changeImg() {
      this.getCode();
    },
    sendCode() {
      this.$validator
        .validateAll({
          imgCode: this.info.imgCode,
          password: this.info.password,
          mobile: this.info.mobile
        })
        .then(result => {
          if (result) {
            let data = {
              mobile: this.info.mobile,
              type: "mobile",
              code: this.info.imgCode
            };
            this.$ajax
              .post(this.$api.getSendCode, data)
              .then(() => {
                this.$refs.code.countdown();
              })
              .catch(err => {
                this.$toast.failed(err);
              });
          } else {
            this.$toast.failed("请你输入完整信息！");
          }
        });
    },
    confirm() {
      this.$validator.validate().then(result => {
        if (result) {
          this.$ajax
            .post(this.$api.saveMobile, {
              mobile: this.info.mobile,
              password: this.info.password,
              code: this.info.code
            })
            .then(() => {
              this.$toast.succeed("绑定手机修改成功！");
              this.$router.go(-1);
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  },
  created() {
    this.getCode();
  }
};
</script>

<style scoped lang="stylus">
.main{
  height 100%;
  background-color #ffffff;
  padding 30px 24px 0;
}
.input{
  margin-bottom 10px;
}
.confirm{
  width 43.2%;
  height 80px;
  background-color #317EB9;
  margin 102px auto 0;
  font-size 30px
}
.md-button.primary::after{
  border none;
}
</style>
